<template>
  <div class="editPage w100 h100">
    <slot name="editPageMain"></slot>
    <div class="editPageTop" v-if="showTopTitle">
      <div class="topLeft">
        <slot name="editPageTitle"></slot>
        <template
          v-if="
            followModuleList.includes($router.currentRoute.name) &&
            $route.query.pageType != 'add'
          "
        >
          <span class="topLeftSpan" v-if="isTitle" @click="star">
            <i class="el-icon-star-off" style="font-size: 18px"></i>关注
          </span>
          <span class="topLeftSpan" v-else @click="unStar">
            <i
              class="el-icon-star-on"
              style="font-size: 21px; color: #e6a23c"
            ></i
            >已关注
          </span>
          <span class="topLeftSpan" @click="share">
            <i class="iconfont icon-fenxiang" style="font-size: 16px"></i> 传阅
          </span>
        </template>
      </div>
      <div class="topRight" v-if="showClose">
        <i class="el-icon-close" @click="closePage"></i>
      </div>
    </div>
    <div class="edit-page-btn" :class="{ paddingSize: havePadding }">
      <div class="editpage-left__btn" v-if="showBackBtn">
        <el-button
          class="btn-text-blue"
          type="plain"
          size="mini"
          @click="goBackPage"
          icon="el-icon-back"
          >返回</el-button
        >
      </div>
      <slot name="statusText"></slot>
      <div class="edit-page-steps">
        <el-steps :active="stepConfig.nowStep" v-if="!showStep">
          <template v-for="(item, index) in stepConfig.stepItem">
            <el-step :title="item" :key="index"></el-step>
          </template>
        </el-steps>
      </div>
      <div class="editpage-right__btn">
        <div class="btnDescribe">
          <slot name="btnDescribe"></slot>
        </div>
        <template v-for="(item, index) in rightBtn">
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.content"
            :disabled="!item.disabled"
            :placement="item.placement || 'top'"
            :key="index"
            v-if="!item.hide"
          >
            <div style="display: inline-block; margin: 0 5px">
              <el-button
                :key="index"
                type="plain"
                class="btn-text-blue"
                size="mini"
                @click="debounceMethods(item.methods)"
                :disabled="item.disabled"
                :icon="item.icon"
                >{{ item.text }}</el-button
              >
            </div>
          </el-tooltip>
        </template>
        <slot name="rightBtn"></slot>
        <span v-if="showMore" class="moreBtnArr">
          <el-popover
            placement="bottom"
            width="100"
            trigger="click"
            ref="firstPopover"
          >
            <div class="moreBtnContent">
              <template v-for="(moreItem, moreIndex) in moreBtnArr">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="moreItem.content"
                  :disabled="!moreItem.disabled"
                  :placement="moreItem.placement || 'left'"
                  :key="moreIndex"
                >
                  <!-- 下一层级 -->
                  <span class="tipContent">
                    <span
                      v-if="
                        !moreItem.hide && moreItem.child && moreItem.disabled
                      "
                      :class="{
                        moreItem: true,
                        ableMoreItem: !moreItem.disabled,
                        disMoreItem: moreItem.disabled,
                      }"
                      :key="moreIndex"
                      @click="!moreItem.disabled ? moreItem.methods : ''"
                    >
                      <i :class="moreItem.icon"></i>
                      <span class="moreItemText">{{ moreItem.text }}</span>
                    </span>
                    <el-popover
                      v-else-if="
                        !moreItem.hide && moreItem.child && !moreItem.disabled
                      "
                      :key="moreIndex"
                      width="200"
                      trigger="hover"
                      placement="left"
                    >
                      <div class="moreBtnContent">
                        <template
                          v-for="(childItem, childIndex) in moreItem.child"
                        >
                          <span
                            class="moreItem"
                            :key="childIndex"
                            @click="moreItem.methods(childItem)"
                          >
                            <span class="childItemText">
                              {{ childItem.label }}
                            </span>
                          </span>
                        </template>
                      </div>
                      <el-button slot="reference" type="plain">
                        {{ moreItem.text }}
                      </el-button>
                    </el-popover>
                    <span
                      v-else-if="!moreItem.hide"
                      :class="{
                        moreItem: true,
                        ableMoreItem: !moreItem.disabled,
                        disMoreItem: moreItem.disabled,
                      }"
                      :key="moreIndex"
                      @click="moreItem.methods(moreItem.disabled)"
                    >
                      <i :class="moreItem.icon"></i>
                      <span class="moreItemText">{{ moreItem.text }}</span>
                    </span>
                  </span>
                </el-tooltip>
              </template>
            </div>
            <el-button
              slot="reference"
              size="mini"
              type="plain"
              icon="icon-gengduo"
              class="btn-text-blue"
              ref="moreBtn"
              >更多</el-button
            >
          </el-popover>
        </span>
      </div>
    </div>
    <div class="editPageContent" :class="{ paddingSize: havePadding }">
      <slot></slot>
    </div>
    <div class="pageBottom">
      <div class="infoDiv" v-if="showBttomTex">
        创建人：{{ creatInfo.createByName }} |
        {{ creatInfo.deptName ? "创建单位：" + creatInfo.deptName + " |" : "" }}
        创建时间：{{ creatInfo.createTime }}
      </div>
    </div>
    <div class="codeDiv topDistance" v-if="showQrCode">
      <div class="blockContent flexColumnNo">
        <div class="blockTop flexWrapNo">
          <div class="blockTitle">操作记录</div>
          <div class="closeBtn" @click="() => (showQrCode = false)">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="blockMiddle">
          <el-timeline>
            <el-timeline-item
              placement="top"
              v-for="(item, index) in remarkList"
              :key="index"
              :icon="item.icon"
              :type="item.type"
              :color="item.color"
              :size="item.size"
            >
              <div class="content">
                <div class="date" slot="reference" v-if="item.type != 'info'">
                  <span class="text">{{ item.content }}</span>
                </div>
                <div class="userInfo" v-else>
                  <span class="userName">{{ item.userName }}</span>
                  <span class="time">{{ item.time }}</span>
                  <div class="remark">{{ item.content }}</div>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
    <div class="codeDiv topDistance" v-if="showBox">
      <div class="blockContent flexColumnNo">
        <div class="blockTop flexWrapNo">
          <div class="blockTitle">{{ boxTitle }}</div>
          <div class="closeBtn" @click="closeBox()">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="boxContent">
          <slot name="boxContent"></slot>
        </div>
      </div>
    </div>
    <dialogPublic
      title="信息选择"
      :show.sync="showUser"
      @doSubmit="newMemberSelect"
      @doClose="closeNewMemberSelect"
      :fullscreen="true"
      appendTobody
    >
      <newMemberSelect
        ref="newMember"
        v-if="showUser"
        :seleteSetting="orgMemberSelect"
      ></newMemberSelect>
    </dialogPublic>
  </div>
</template>

<script>
import {
  follow,
  cancelfollow,
  serchfollow,
  getfollow,
  transmit,
} from "@/api/common.js";
import { getOperateList } from "@/api/common.js";
export default {
  props: {
    rightBtnArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
    moreBtnArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //进度条配置
    stepConfig: {
      type: Object,
      default: () => {
        return {};
      },
    },
    //显示顶部标题
    showTopTitle: {
      type: Boolean,
      default: false,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
    //是否有间隔
    havePadding: {
      type: Boolean,
      default: true,
    },
    //显示更多按钮
    showMore: {
      type: Boolean,
      default: false,
    },
    showBackBtn: {
      type: Boolean,
      default: false,
    },
    boxTitle: {
      type: String,
      default: "",
    },
    //页面创建信息
    creatInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      rightBtn: [],
      active: 0,
      showQrCode: false,
      showBox: false,
      checkList: [],
      remarkList: [],
      showUser: false,
      isTitle: true,
      orgMemberSelect: {
        type: "user-select",
        multiple: true,
        chosedData: [],
      },
      followModuleList: [],
      customCallback: () => {} // 自定义回调函数
    };
  },
  computed: {
    showStep() {
      let leng = this.stepConfig;
      return JSON.stringify(leng) == "{}";
    },
    /* 是否展示底部页面创建信息 */
    showBttomTex() {
      return this.creatInfo.createByName;
      // return !(JSON.stringify(this.creatInfo) === "{}");
    },
  },
  created() {
    this.init();
    window.addEventListener("storage", (e) => {
      if (e.key === "unFollow") {
        this.init();
      }
    });
  },
  watch: {
    rightBtnArr: {
      handler(val) {
        this.rightBtn = this.rightBtnArr;
      },
      deep: true,
    },
    isTitle: {
      handler(val) {
        // 工作台刷新
        localStorage.removeItem("follow");
        localStorage.setItem("follow", "follow");
      },
      deep: true,
    },
  },
  methods: {
    init() {
      // 根据id查询
      let data = {};
      this.followModuleList = [];
      if (this.$route.query.id) {
        data.page_id = this.$route.query.id;
      }
      if (this.$route.query.val) {
        data.page_id = this.$route.query.val;
      }
      let name = this.$router.currentRoute.name;
      data.module = this.$store.getters["fineDirtDataName"](
        "module_router",
        name
      );
      getfollow(data).then((res) => {
        if (res.data) {
          this.isTitle = false;
        } else {
          this.isTitle = true;
        }
      });
      this.$store.getters["dirtData"]("module_router").map((i) => {
        this.followModuleList.push(i.value);
      });
      localStorage.removeItem("follow");
      localStorage.setItem("follow", "follow");
      this.rightBtn = this.rightBtnArr;
    },
    formetter(name) {
      return name.substr(name.length - 2);
    },
    showOperate() {
      this.showQrCode = true;
      if (this.$refs.firstPopover) {
        this.$refs.firstPopover.doClose();
      }
      this.getOperateInfo(this.creatInfo.id);
    },
    showEditPageBox() {
      this.showBox = true;
      this.$refs.firstPopover.doClose();
    },
    closeBox() {
      this.showBox = false;
      this.$emit("closeBox");
    },
    goBackPage() {
      this.$emit("goBackPage", true);
    },
    clickMore() {
      this.$refs.moreBtn.$el.click();
    },
    //获取操作记录
    async getOperateInfo(id) {
      let params = {
        businessId: id,
      };
      let res = await getOperateList(params);
      this.handleOperateInfo(res.data);
      return res;
    },

    //处理操作记录数据
    handleOperateInfo(data) {
      let list = [];
      data.forEach((item, index) => {
        if (index == 0) {
          list.push({
            size: "large",
            type: "primary",
            content: item.createTime.split(" ")[0],
            date: item.createTime.split(" ")[0],
          });
          list.push({
            type: "info",
            time: this.handleTime(item.createTime),
            content: item.content,
            date: item.createTime.split(" ")[0],
            userName: item.createByName,
          });
        } else {
          if (item.createTime.split(" ")[0] != list[list.length - 1].date) {
            list.push({
              size: "large",
              type: "primary",
              content: item.createTime.split(" ")[0],
              date: item.createTime.split(" ")[0],
            });
            list.push({
              type: "info",
              time: this.handleTime(item.createTime),
              content: item.content,
              date: item.createTime.split(" ")[0],
              userName: item.createByName,
            });
          } else {
            list.push({
              type: "info",
              time: this.handleTime(item.createTime),
              content: item.content,
              date: item.createTime.split(" ")[0],
              userName: item.createByName,
            });
          }
        }
      });
      this.remarkList = list;
    },
    //报时间转成上下午
    handleTime(time) {
      let now = new Date(time);
      let hours = now.getHours();
      let minutes = now.getMinutes();
      let seconds = now.getSeconds();
      let timeValue = "" + (hours >= 12 ? "下午 " : "上午 ");
      timeValue += hours > 12 ? hours - 12 : hours;
      timeValue += (minutes < 10 ? ":0" : ":") + minutes;
      return timeValue;
    },
    //关闭当前页面
    closePage(num) {
      if (num) {
        setTimeout(() => {
          window.close();
        }, num);
      } else {
        window.close();
      }
    },
    // 关注
    star() {
      let name = this.$router.currentRoute.name;
      // 特殊处理
      let routerName = [
        "substationTicketDetails",
        "plannedMaintenancePlanDetail",
        "experimentPlanDetail",
      ];
      let module = this.$store.getters["fineDirtDataName"](
        "module_router",
        name
      );
      if (routerName.includes(name)) {
        module = module.substring(0, module.length - 1);
      }
      let data = {};
      if (this.$route.query.id) {
        data.page_id = this.$route.query.id;
      }
      if (this.$route.query.val) {
        data.page_id = this.$route.query.val;
      }
      data.module = module;
      data.page_type = this.$route.query.pageType;
      follow(data).then((res) => {
        this.isTitle = !this.isTitle;
        this.$message.success("关注成功！！！");
      });
    },
    // 取关
    unStar() {
      let data = {};
      if (this.$route.query.id) {
        data.page_id = this.$route.query.id;
      }
      if (this.$route.query.val) {
        data.page_id = this.$route.query.val;
      }
      this.$confirm("是否取消关注此工作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        cancelfollow(data).then((res) => {
          this.isTitle = !this.isTitle;
          this.$message.success("取关成功！！！");
        });
      });
    },
    // 传阅
    share() {
      this.showUser = true;
    },
    // 外部父组件hack修改传阅弹窗
    modifyShareFromParent(cb) {
      this.share()
      if(typeof cb !== 'function') throw new TypeError('传给modifyShareFromParent方法的参数必须是个函数!')
      this.customCallback = cb
    },
    closeNewMemberSelect() {
      this.showUser = false
      if(this.customCallback) this.customCallback()
    },
    //确定选择人员
    newMemberSelect() {
      let data = this.$refs.newMember.getSelectData();
      let transTo = data.map((i) => i.account).join(",");
      let name = this.$router.currentRoute.name;
      // 特殊处理
      let routerName = [
        "substationTicketDetails",
        "plannedMaintenancePlanDetail",
        "experimentPlanDetail",
      ];
      let module = this.$store.getters["fineDirtDataName"](
        "module_router",
        name
      );
      let transmit_module = "transmit_";
      let obj = {};
      if (routerName.includes(name)) {
        transmit_module += module;
        module = module.substring(0, module.length - 1);
      } else {
        transmit_module += module;
      }
      obj.module = module;
      obj.transmit_module = transmit_module;
      if (this.$route.query.id) {
        obj.page_id = this.$route.query.id;
      }
      if (this.$route.query.val) {
        obj.page_id = this.$route.query.val;
      }
      obj.page_type = this.$route.query.pageType;
      if (data.length) {
        obj.transTo = transTo;
        // 调用接口传阅
        transmit(obj).then((res) => {
          this.$message({
            type: 'success',
            message: '传阅成功！',
            customClass: 'notify-zindex'
          })
          // 传阅并携带有回调函数
          if(this.showUser && this.customCallback) {
            this.customCallback()
          }
          this.showUser = false;
        });
      } else {
        this.$message({
          message: "请选择人员",
          type: "warning",
        });
      }
      // 清除已选择
      this.$refs.newMember.clearAll();
    },
  },
};
</script>

<style lang="less" scoped>
.editPage {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  .edit-page-btn {
    margin-top: 16px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /deep/.el-step__main {
    margin-top: -55px;
  }
  .topLeft {
    font-weight: bolder;
    .topLeftSpan {
      cursor: pointer;
      font-size: 14px;
      margin-left: 10px;
    }
  }
  .edit-page-steps {
    width: 50%;
  }
  .edit-page-content {
    height: 100%;
    overflow-y: auto;
  }
  .edit-page-btn__text {
    font-size: 14px;
    font-weight: 400;
  }
  .editPageTop {
    height: 40px;
    padding: 0px 20px;
    line-height: 40px;
    font-size: 16px;
    display: flex;
    flex-flow: wrap nowrap;
    justify-content: space-between;
    border-bottom: 1px solid #f2f6fa;
  }
  .editPageContent {
    height: 100%;
    overflow: auto;
    margin-top: 15px;
  }
  .topLeft {
    font-size: 16px;
  }
  .topRight {
    font-size: 16px;
  }
  .topRight:hover {
    cursor: pointer;
  }
  .moreBtnArr {
    margin-left: 5px;
  }
  /deep/.el-step__icon {
    display: flex;
    width: 22px;
    height: 22px;
  }
  /deep/.el-step__title.is-success,
  /deep/.el-step__head.is-success {
    color: @kr-elementUI-color;
  }
  /deep/.el-step__head.is-finish,
  /deep/.el-step__title.is-finish {
    color: @kr-elementUI-color;
    opacity: 0.7;
    border-color: @kr-elementUI-color;
  }
  /deep/.el-step__head.is-finish .el-step__line {
    background-color: @kr-elementUI-color;
    opacity: 0.7;
  }
  /deep/.el-step__title {
    font-size: 14px;
  }
  /deep/.el-step__title.is-process {
    color: @kr-elementUI-color;
  }
  /deep/.el-step__head.is-process {
    border-color: @kr-elementUI-color;
    color: @kr-elementUI-color;
  }
}
.moreBtnContent {
  display: flex;
  flex-flow: column nowrap;
  .tipContent {
    height: auto;
    .moreItem {
      height: 30px;
      line-height: 30px;
    }
  }
  .moreItem:hover {
    cursor: pointer;
    color: @kr-elementUI-color;
  }
  .ableMoreItem:hover {
    cursor: pointer;
    color: @kr-elementUI-color;
  }
  .disMoreItem:hover {
    cursor: not-allowed;
    color: #000;
  }
}
.paddingSize {
  padding: 0 5%;
  //margin: 0 auto;
}
.pageBottom {
  height: 44px;
  line-height: 44px;
  text-align: right;
  padding: 0px 24px;
  color: #c2c2c2;
}
.moreBtnContent {
  .el-popover__reference-wrapper {
    .el-button {
      border: none;
      padding: 0px;
    }
    .el-button:focus,
    .el-button:hover {
      background-color: transparent;
      color: @kr-elementUI-color;
    }
  }
  .moreItem + .moreItem {
    margin-top: 10px;
  }
}
.editpage-right__btn {
  display: flex;
  flex-flow: wrap nowrap;
  .btnDescribe {
    text-align: right;
    margin-right: 15px;
    line-height: 30px;
    color: #c2c2c2;
  }
}
.codeDiv {
  position: absolute;
  width: 400px;
  background-color: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  top: 120px;
  right: 10px;
  z-index: 999;
  padding: 0 25px 24px 25px;
  .blockContent {
    .blockTop {
      height: 40px;
      line-height: 40px;
      display: flex;
      flex-flow: wrap nowrap;
      justify-content: space-between;

      padding: 0 12px;
    }
    .blockTitle {
      font-size: 16px;
      font-weight: bolder;
    }
    .blockItemTop {
      margin-bottom: 10px;
    }
    .blockMiddle {
      height: 500px;
      overflow: auto;
      padding: 20px 10px;
      .content {
        display: flex;
        text-align: left;
        position: relative;
        top: -12px;
        .date {
          margin-left: 20px;
          .text {
            font-size: 14px;
            font-weight: 400;
            color: #2c77f4;
          }
        }
        .userInfo {
          margin-left: 20px;
          .userName {
            font-size: 16px;
            font-weight: 400;
            color: #333333;
          }
          .time {
            font-size: 14px;
            font-weight: 400;
            color: #cccccc;
            margin-left: 10px;
          }
          .remark {
            margin-top: 10px;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            white-space: pre-line;
          }
        }
      }
    }
    .boxContent {
      max-height: 700px;
      // height: calc(100% - 60px);
      overflow: auto;
    }
  }
}
.topDistance {
  top: 110px;
}
</style>
